// 较小尺寸显示器上
@mixin mqsmall($select, $rules) {
    @media all and (max-width: 768px){
        #{$select}{
            @each $key, $value in $rules{
                    #{$key}: #{$value};
            }
        }
    }
}

// 小于给定宽度的情况下
@mixin mq($select, $max, $rules) {
    @media all and (max-width: #{$max}){
        #{$select}{
            @each $key, $value in $rules{
                    #{$key}: #{$value};
            }
        }
    }
}

// 在给定宽度区间的情况下
@mixin mqfromto($select, $max, $min, $rules) {
    @media all and (max-width: #{$max}) and (min-width: #{$min}){
        #{$select}{
            @each $key, $value in $rules{
                    #{$key}: #{$value};
            }
        }
    }
}

// 添加CSS属性前缀
@mixin prefix($name, $value) {
    #{$name}: #{$value};
    -moz-#{$name}: #{$value};
    -ms-#{$name}: #{$value};
    -webkit-#{$name}: #{$value};
}


.noselect{
    user-select: none;
    -webkit-user-select: none;
}

.clear{
    &:after{
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }
}

.hide{
    display: none;
}

.iconfont{
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon-feed:before {
    content: "\f005";
    @extend .iconfont;
    @extend .noselect;
}
.icon-unfeed:before {
    content: "\f006";
    @extend .iconfont;
    @extend .noselect;
}
.icon-search:before {
    content: "\f002";
    @extend .iconfont;
    @extend .noselect;
}
.icon-info:before {
    content: "\f022";
    @extend .iconfont;
    @extend .noselect;
}
.icon-qr:before {
    content: "\f029";
    @extend .iconfont;
    @extend .noselect;
}
.icon-eye:before {
    content: "\f06e";
    @extend .iconfont;
    @extend .noselect;
}
.icon-link:before {
    content: "\f0c1";
    @extend .iconfont;
    @extend .noselect;
}
.icon-hamburger:before {
    content: "\f0c9";
    @extend .iconfont;
    @extend .noselect;
}
.icon-left:before {
    content: "\f104";
    @extend .iconfont;
    @extend .noselect;
}
.icon-right:before {
    content: "\f105";
    @extend .iconfont;
    @extend .noselect;
}
.icon-loading:before {
    content: "\e900";
    @extend .iconfont;
    @extend .noselect;
}

.green{
    background-color: #5cb85c;
}

.yellow{
    background-color: #f0ad4e;
}

.red{
    background-color: #d9534f;
}

.pr{
    position: relative;
}

.likebtn{
    font-size: 20px;
    color: #757575;
    cursor: pointer;
    display: inline-block;
    transition: color .5s cubic-bezier(0.42, 0, 0.35, 1);
    @extend .iconfont;
    @extend .noselect;
    &[data-islike="true"]{
        animation: like .5s cubic-bezier(0.42, 0, 0.35, 1);
        &:before{
            content: "\f005";
            color: #F1C40F;
        }
    }
}
@keyframes like{
    0%   { transform: scale(1); }
    20%  { transform: scale(0.1); }
    80%  { transform: scale(1.2); }
    100% { transform: scale(1.0); }
}
    
.btn{
    background-color: #ebebeb;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    color: #505e69;
    outline: none;
    cursor: pointer;
    padding: 3px 6px 3px;
    font-size: 13px;
    &:disabled{
        color: #BABABA;
        cursor: not-allowed;
    }
}